<template>
    <div>
      <!--头部 开始-->
      <header class="fix">
        <a href="javascript:history.go(-1);" class="returnBtn"></a>
        销售订单
      </header>
      <!--头部 结束-->
      <!--中间 开始-->
      <main>
        <div class="salesOrderMain">
          <div class="searchMain">
            <input type="text" name="" placeholder="输入订单号、客户ID">
            <a href="javascript:void(0);">搜索</a>
          </div>
          <div class="orderOption" id="orderOption">
            <div class="optionNav fix">
              <a href="javascript:void(0);" class="Cur">全部</a>
              <a href="javascript:void(0);">未结算</a>
              <a href="javascript:void(0);">已退款</a>
              <a href="javascript:void(0);">已结算</a>
            </div>
            <div class="optionCont">
              <ul class="opContInfo" style="display: block;">
                <li>
                  <div class="infoTop">
                    <span>一大颗小橙子</span>
                    <span>123389480284</span>
                    <em>订单已完成</em>
                  </div>
                  <a href="#" class="infoMiddle">
                    <div class="middleImg"><img src="../../images/temporary/commodity9.png"></div>
                    <div class="middleDet">
                      <div class="middleTitle">
                        <p>健安喜(GNC)乳清蛋白粉蛋白质粉增肌粉健身进口 2磅</p>
                        <span>￥19.90</span>
                      </div>
                      <div class="orderNum">X1</div>
                    </div>
                  </a>
                  <div class="timePrice">
                    <span>2018-06-26 23:24:11</span>
                    <div class="total"><em>总计：</em><span>￥19.90</span></div>
                    <div class="discount">优惠：<em>￥0.00</em></div>
                  </div>
                  <div class="infoBottom">
                    <a href="#" class="but">查看评价</a>
                  </div>
                </li>
                <li>
                  <div class="infoTop">
                    <span>一大颗小橙子</span>
                    <span>123389480284</span>
                    <em>订单正在进行</em>
                  </div>
                  <a href="#" class="infoMiddle">
                    <div class="middleImg"><img src="../../images/temporary/commodity9.png"></div>
                    <div class="middleDet">
                      <div class="middleTitle">
                        <p>健安喜(GNC)乳清蛋白粉蛋白质粉增肌粉健身进口 2磅</p>
                        <span>￥19.90</span>
                      </div>
                      <div class="orderNum">X1</div>
                    </div>
                  </a>
                  <div class="timePrice">
                    <span>2018-06-26 23:24:11</span>
                    <div class="total"><em>总计：</em><span>￥19.90</span></div>
                    <div class="discount">优惠：<em>￥0.00</em></div>
                  </div>
                  <div class="infoBottom">
                    <a href="#" class="but">查看物流</a>
                  </div>
                </li>
                <li>
                  <div class="infoTop">
                    <span>一大颗小橙子</span>
                    <span>123389480284</span>
                    <em>买家已退款</em>
                  </div>
                  <a href="#" class="infoMiddle">
                    <div class="middleImg"><img src="../../images/temporary/commodity9.png"></div>
                    <div class="middleDet">
                      <div class="middleTitle">
                        <p>健安喜(GNC)乳清蛋白粉蛋白质粉增肌粉健身进口 2磅</p>
                        <span>￥19.90</span>
                      </div>
                      <div class="orderNum">X1</div>
                    </div>
                  </a>
                  <div class="timePrice">
                    <span>2018-06-26 23:24:11</span>
                    <div class="total"><em>总计：</em><span>￥19.90</span></div>
                    <div class="discount">优惠：<em>￥0.00</em></div>
                  </div>
                  <div class="infoBottom">
                    <a href="#" class="but">查看详情</a>
                  </div>
                </li>
              </ul>
              <ul class="opContInfo">
                <li>
                  <div class="infoTop">
                    <span>一大颗小橙子</span>
                    <span>123389480284</span>
                    <em>订单正在进行</em>
                  </div>
                  <a href="#" class="infoMiddle">
                    <div class="middleImg"><img src="../../images/temporary/commodity9.png"></div>
                    <div class="middleDet">
                      <div class="middleTitle">
                        <p>健安喜(GNC)乳清蛋白粉蛋白质粉增肌粉健身进口 2磅</p>
                        <span>￥19.90</span>
                      </div>
                      <div class="orderNum">X1</div>
                    </div>
                  </a>
                  <div class="timePrice">
                    <span>2018-06-26 23:24:11</span>
                    <div class="total"><em>总计：</em><span>￥19.90</span></div>
                    <div class="discount">优惠：<em>￥0.00</em></div>
                  </div>
                  <div class="infoBottom">
                    <a href="#" class="but">查看物流</a>
                  </div>
                </li>
                <li>
                  <div class="infoTop">
                    <span>一大颗小橙子</span>
                    <span>123389480284</span>
                    <em>申请退款退货</em>
                  </div>
                  <a href="#" class="infoMiddle">
                    <div class="middleImg"><img src="../../images/temporary/commodity9.png"></div>
                    <div class="middleDet">
                      <div class="middleTitle">
                        <p>健安喜(GNC)乳清蛋白粉蛋白质粉增肌粉健身进口 2磅</p>
                        <span>￥19.90</span>
                      </div>
                      <div class="orderNum">X1</div>
                    </div>
                  </a>
                  <div class="timePrice">
                    <span>2018-06-26 23:24:11</span>
                    <div class="total"><em>总计：</em><span>￥19.90</span></div>
                    <div class="discount">优惠：<em>￥0.00</em></div>
                  </div>
                  <div class="infoBottom">
                    <a href="#" class="but">处理退款</a>
                  </div>
                </li>
              </ul>
              <ul class="opContInfo">
                <li>
                  <div class="infoTop">
                    <span>一大颗小橙子</span>
                    <span>123389480284</span>
                    <em>买家已退款</em>
                  </div>
                  <a href="#" class="infoMiddle">
                    <div class="middleImg"><img src="../../images/temporary/commodity9.png"></div>
                    <div class="middleDet">
                      <div class="middleTitle">
                        <p>健安喜(GNC)乳清蛋白粉蛋白质粉增肌粉健身进口 2磅</p>
                        <span>￥19.90</span>
                      </div>
                      <div class="orderNum">X1</div>
                    </div>
                  </a>
                  <div class="timePrice">
                    <span>2018-06-26 23:24:11</span>
                    <div class="total"><em>总计：</em><span>￥19.90</span></div>
                    <div class="discount">优惠：<em>￥0.00</em></div>
                  </div>
                  <div class="infoBottom">
                    <a href="#" class="but">查看详情</a>
                  </div>
                </li>
              </ul>
              <ul class="opContInfo">
                <li>
                  <div class="infoTop">
                    <span>一大颗小橙子</span>
                    <span>123389480284</span>
                    <em>订单已完成</em>
                  </div>
                  <a href="#" class="infoMiddle">
                    <div class="middleImg"><img src="../../images/temporary/commodity9.png"></div>
                    <div class="middleDet">
                      <div class="middleTitle">
                        <p>健安喜(GNC)乳清蛋白粉蛋白质粉增肌粉健身进口 2磅</p>
                        <span>￥19.90</span>
                      </div>
                      <div class="orderNum">X1</div>
                    </div>
                  </a>
                  <div class="timePrice">
                    <span>2018-06-26 23:24:11</span>
                    <div class="total"><em>总计：</em><span>￥19.90</span></div>
                    <div class="discount">优惠：<em>￥0.00</em></div>
                  </div>
                  <div class="infoBottom">
                    <a href="#" class="but">查看评价</a>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </main>
      <!--中间 结束-->
    </div>
</template>

<script>
    export default {
        name: "salesOrder",
      methods:{
        orderOpTab:function (){
    var $li = $('.orderOption .optionNav a');
    var $ul = $('.orderOption .optionCont .opContInfo');
    $("#orderOption").css('height',$ul.eq(0).height())
    $li.click(function(){
      var $this = $(this);
      var $t = $this.index();
      $li.removeClass();
      $this.addClass('Cur');
      $ul.css('display','none');
      $ul.eq($t).css('display','block');
      $("#orderOption").css('height',$ul.eq($t).height())
    })
  }
      },
      mounted:function () {
        this.orderOpTab()
      }
    }
</script>

<style scoped>
@import "../../css/common/common.css";
@import "../../css/other/fragmentary.css";
</style>
